<template>
  <el-menu class="el-menus" mode="horizontal">
    <el-menu-item>
      <el-menu-item disabled>
        <span>BOSS直聘</span>
      </el-menu-item>
      <el-menu-item>
        <router-link to="/sub-app/home">首页</router-link>
      </el-menu-item>
      <el-menu-item>
        <router-link to="/sub-app/job">找工作</router-link>
      </el-menu-item>
      <el-menu-item>
        <router-link to="/sub-app/enterprise">找企业</router-link>
      </el-menu-item>
      <el-menu-item>
        <router-link to="/sub-app/about">关于我们</router-link>
      </el-menu-item>
    </el-menu-item>
    <el-menu-item>
      <span @click="logout" v-if="globalData && globalData.token" to="/login">
        <el-button>
          退出
        </el-button>
      </span>
      <span @click="login" v-else>
        <el-button>
          登录
        </el-button>
      </span>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import microApp from '@micro-zoe/micro-app';
import { ElMessage } from 'element-plus';
import { useRouter } from "vue-router";
import { logout as logoutApi } from "@/api/login";

const router = useRouter();
const globalData = microApp.getGlobalData();
const login = () => router.push("/login");
const logout = () => {
  logoutApi().then(res => {
    if (res.success) {
      ElMessage.success(res.errMsg || "退出成功")
      microApp.clearGlobalData();
      router.push("/login");
    } else {
      ElMessage.error(res.errMsg || "退出失败")
    }
  })
}
</script>

<style>
.el-menus {
  display: flex;
  justify-content: space-between;
}
</style>
